<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    
    <style>
      div {
        border: 1px solid black;
        height: 200px;
        width: 200px
      }
      
      /* 当视口宽度刚好为600px时容器wh-media1的背景颜色变为pink */
      @media screen and (width: 600px) {
        .wh-media1 {
          background: pink;
        }
      }
      
      /* 当视口宽度大于400px时容器wh-media2的背景颜色变为skyblue */
      @media screen and (min-width: 400px) {
        .wh-media2 {
          background: skyblue;
        }
      }
      
      /* 当视口宽度小于800px时容器wh-media3的背景颜色变为plum */
      @media screen and (max-width: 800px) {
        .wh-media3 {
          background: plum;
        }
      }
      
      /* 当视口横放时容器lp-media1的背景颜色变为pink */
      @media (orientation: landscape) {
        .lp-media1 {
          background: pink;
        }
      }
      
      /* 当视口竖放时容器lp-media2的背景颜色变为skyblue*/
      @media (orientation: portrait) {
        .lp-media2 {
          background: skyblue;
        }
      }
    </style>
  </head>
  <body>
    <!--1.媒体特征规则-->
    <!--①宽高**：此宽高指的是视口宽高，常常通过`width`、`max-width`、`min-width`、`height`、`max-height`和`min-height`属性设置，表示视口宽高大于、小于或等于某阈值时使用该媒体查询规则-->
    <!--<div class="wh-media1"></div>
    <div class="wh-media2"></div>
    <div class="wh-media3"></div>-->
    <!--②朝向**：`orientation`可测得视口横放(**landscape**)还是竖放(**portrait**)，标准的桌面视图默认横放-->
    <div class="lp-media1">横放</div>
    <div class="lp-media2">竖放</div>
    <!--③指点设备**：`pointer`捕获用户与屏幕的交互，用于更好的设计交互界面，可取`none`、`fine`和`coarse`三个值。`fine`指向类似于鼠标或触控板的东西，`coarse`指向触摸屏上的手指，`none`表示没有指点设备，也许用户正在使用键盘或语言等-->
  </body>
</html>